<template>
	<view class="Workorderdetails-box">
		<view class="Workorderdetails-top">
			<u-navbar :border-bottom="false" title="工单详情"  title-color="#333333" back-icon-color="#333333"></u-navbar>
		</view>
		<view class="Workorderdetails-auto">
			<view class="Workorderdetails-auto-Pending">—— 待处理 ——</view>
			<view class="Workorderinformation-box">
				<view class="Workorderinformation">
					<view class="Workorder">
						<u-icon class="Workorder-tb" name="order" color="#333333" size="30"></u-icon>
						工单信息
					</view>
					<u-read-more ref="uReadMore" :shadow-style="shadowStyle" open-text="收起" close-text="展开" font-size="24" color="#92C25B" text-indent="0" :toggle="toggle" :show-height="320">
						<view class="Workorder-nr" v-for="item in 10">
							<view class="Workorder-nr-left">创建时间</view>
							<view class="Workorder-nr-right">2021/04/19 12:00:00</view>
						</view>
						<rich-text :nodes="content"></rich-text>
					</u-read-more>
				</view>
				<view class="Communicationrecord">
					<view class="Workorder">
						<u-icon class="Workorder-tb" name="order" color="#333333" size="30"></u-icon>
						沟通记录 ( 3 )
					</view>
					<view class="Communicationrecord-nr">
						<view class="Communicationrecord-content reply">
							<view class="Communicationrecord-content-top">
								<view class="Communicationrecord-content-left">商雾</view>
								<view class="Communicationrecord-content-right">04月13日 13:15:09</view>
							</view>
							<view class="Communicationrecord-content-auto">待你回复</view>
							<view class="Communicationrecord-content-bottom">这条是商务部人员查看后回复的工单</view>
						</view>
						<view class="Communicationrecord-content record">
							<view class="Communicationrecord-content-top">
								<view class="Communicationrecord-content-left">吴俊</view>
								<view class="Communicationrecord-content-right">04月13日 13:15:09</view>
							</view>
							<view class="Communicationrecord-content-auto"></view>
							<view class="Communicationrecord-content-bottom">这条是市场人员回复机构的内容，机构可再次发起回复 与机构签约的商务部人员也能查看此工单并回复。</view>
						</view>
						<view class="Communicationrecord-content Workorder1">
							<view class="Communicationrecord-content-top">
								<view class="Communicationrecord-content-left">周大明</view>
								<view class="Communicationrecord-content-right">04月13日 13:15:09</view>
							</view>
							<view class="Communicationrecord-content-auto">发起工单</view>
							<view class="Communicationrecord-content-bottom">这条是机构发起的工单反馈，需要市场部人员回复</view>
						</view>
					</view>
				</view>
				<view class="Workorderfeedback">
					<view class="Workorder">
						<u-icon class="Workorder-tb" name="order" color="#333333" size="30"></u-icon>
						工单反馈
					</view>
					<view class="Workorderfeedback-xz">
						<view class="Workorderfeedback-xz-text">选择状态：</view>
						<view class="Workorderfeedback-xz-cl">
							<u-radio-group v-model="value" @change="radioGroupChange">
								<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="Workorderfeedback-ms">
						<view class="Workorderfeedback-ms-text">问题描述：</view>
						<view class="Workorderfeedback-ms-srk">
							<u-input type="textarea" placeholder="请输入问题描述" maxlength="140" v-model="form.remarks" />
						</view>
					</view>
					<view class="Workorderfeedback-Button">反馈</view>
				</view>
			</view>
		</view>
		<view class="Workorderdetails-bottom">
			<bottom/>
		</view>
	</view>
</template>

<script>
	import bottom from '../../../components/bottom-other/index.vue'
	export default {
		components:{ bottom },
		data() {
			return {
				form: {
					remarks:'',
				},
				close: false,
				content: ' ',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				list: [
					{
						name: '处理中',
						disabled: false
					},
					{
						name: '已处理',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				toggle: true,
			}
		},
		onLoad() {

		},
		methods: {
			closeType () {
				this.close = !this.close
			},
			openXs () {
				this.$refs.child.getOpen()
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style>
	.Workorderdetails-box{
		background: #EEEEEE;
	}
	.Workorderdetails-top{}
	.Workorderdetails-auto{}
	.Workorderdetails-auto-Pending{
		display: flex;
		padding: 30upx;
		font-size: 24upx;
		font-weight: 500;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
		background-color: #A8CE7C;
	}
	.Workorderinformation-box{
		padding-bottom: 30upx;
	}
	.Workorderinformation{
		margin: 30upx;
		padding: 30upx;
		background: #FFFFFF;
		border-radius: 10upx;
	}
	.Workorder{
		display: flex;
		align-items: center;
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
	}
	.Workorder-tb{
		margin-right: 10upx;
	}
	.Workorder-nr{
		display: flex;
		margin: 20upx 0;
	}
	.Workorder-nr-left{
		width: 25%;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
	}
	.Workorder-nr-right{
		width: 75%;
		font-size: 24upx;
		font-weight: 500;
		color: #333333;
	}
	.Communicationrecord{
		margin: 30upx;
		padding: 30upx;
		background: #FFFFFF;
		border-radius: 10upx;
	}
	.Workorderfeedback{
		margin: 30upx;
		padding: 30upx;
		background: #FFFFFF;
		border-radius: 10upx;
	}
	.Workorder-nr-bottom{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Putitaway{
		width: 100%;
		font-size: 22upx;
		font-weight: 400;
		color: #92C25B;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.open{
		width: 100%;
		font-size: 22upx;
		font-weight: 400;
		color: #92C25B;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Communicationrecord-nr{
		margin-top: 30upx;
	}
	.Communicationrecord-content{
		margin-left: 14upx;
		padding-left: 25upx;
		padding-bottom: 30upx;
		border-left: 1px solid #E2E2E2;
	}
	.Communicationrecord-content:nth-last-child(1){
		padding-bottom: 0;
	}
	.Communicationrecord-content-top{
		display: flex;
		position: relative;
	}
	.Communicationrecord-content-top:after{
		top: 14upx;
		left: -31upx;
		content: "";
		width: 10upx;
		height: 10upx;
		border-radius: 100%;
		position: absolute;
		background-color: #999999;
	}
	.reply .Communicationrecord-content-top:after{
		top: 0;
		background-color: #87B847;
	}
	.Workorder1 .Communicationrecord-content-top:after{
		background-color: #0081F1;
	}
	.Workorder1 .Communicationrecord-content-auto{
		color: #0081F1;
	}
	.Communicationrecord-content-left{
		width: 100%;
		font-size: 26upx;
		font-weight: bold;
		color: #212121;
	}
	.Communicationrecord-content-right{
		width: 70%;
		font-size: 22upx;
		font-weight: 500;
		color: #999999;
		text-align: right;
	}
	.Communicationrecord-content-auto{
		font-size: 24upx;
		font-weight: 500;
		color: #87B847;
		margin: 10upx 0;
	}
	.Communicationrecord-content-bottom{
		font-size: 26upx;
		font-weight: 500;
		color: #888888;
		text-align: justify;
	}
	.Workorderfeedback-xz-text,.Workorderfeedback-ms-text{
		font-size: 26upx;
		font-weight: 400;
		color: #666666;
		margin: 30upx 0;
	}
	.Workorderfeedback-xz-cl{
		padding: 25upx 40upx;
		background-color: #F9F9F9;
	}
	.Workorderfeedback-ms-srk{
		padding: 20upx;
		background-color: #F9F9F9;
	}
	.Workorderfeedback-Button{
		color: #fff;
		padding: 20upx;
		margin: 0 200upx;
		margin-top: 40upx;
		margin-bottom: 25upx;
		text-align: center;
		background: linear-gradient(112deg, #A9D577, #B1DD7F, #92C25B);
		box-shadow: 0px 0px 20px 0px #DBF5BD;
		border-radius: 10px;
	}
	.Workorderdetails-bottom{
		background-color: #fff;
	}
	.Workorderdetails-box /deep/ .u-radio__label{
		margin-right: 146upx;
	}
	.Workorderdetails-box /deep/ .uni-textarea-textarea{
		font-size: 26upx;
	}
	.Workorderdetails-box /deep/ .u-content__showmore-wrap{
		padding-bottom: 0;
	}
</style>
